<template>
  <div>
    <h1>儿子:{{ count }}</h1>
    <button @click="changePar">修改父的count</button>
    <hr />
    <Grand />
  </div>
</template>

<script>
import Grand from './grand.vue'
export default {
  components: {
    Grand
  },
  // 声明父传子变量名
  props: {
    count: {
      type: Number,
      default: 0
    }
  },
  // 声明自定义事件名
  emits: ['change-count'],
  created () {
    console.log('vue2:', this.count, this.$emit)
  },
  setup (props, { emit }) {
    console.log('vue3:', props)
    const changePar = () => {
      // 2. 触发父组件的事件=》change-count
      emit('change-count', Math.random() * 100)
    }
    return { changePar }
  }
}
</script>

<style lang="scss" scoped>
</style>
